<template>
    <div>
        <Appnavigatebar title="注册第二步" :isshowright="false"></Appnavigatebar>
        <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码">
            <template #button>
                <van-button ref="sendBtn" :disabled="isSendDisabled" size="small" type="primary" @click="sendCodeFn">{{
                    sendBtnMsg }}</van-button>
            </template>
        </van-field>
        <div class="submit_box">
            <van-button type="primary" :disabled="isdisabled" round size="large" @click="submitFn">下一步</van-button>
        </div>
    </div>
</template>

<script>
import Appnavigatebar from '@/components/Appnavigatebar.vue';
// 导入接口
import { sendCodeApi, docheckcodeApi } from '@/api/regist'
export default {
    data() {
        return {
            sms: '', //短信验证码
            isdisabled: true,  // 下一步按钮是否禁用
            tel: this.$route.params.tel, // 路由参数 手机号
            isSendDisabled: false, // 发送验证码按钮是否禁用
            sendBtnMsg: '发送验证码' // 发送按钮文本
        }
    },
    components: {
        Appnavigatebar
    },
    watch: {
        sms(newvalue) {
            if (/^[0-9]{5}$/.test(newvalue)) {
                this.isdisabled = false
            } else {
                this.isdisabled = true
            }
        }
    },
    methods: {
        sendCodeFn() {
            // 设置一个初始值 10
            let count = 10;
            // 设置发送验证码按钮禁用
            this.isSendDisabled = true;
            // 给发送验证码按钮重新赋值
            this.sendBtnMsg = count + ' 秒重新发送'
            let timer = setInterval(() => {
                count--;
                // 给发送验证码按钮重新赋值
                this.sendBtnMsg = count + ' 秒重新发送'
                if (count == 0) {
                    this.sendBtnMsg = '发送验证码'
                    // 设置发送验证码按钮可以点击
                    this.isSendDisabled = false;
                    // 清除定时器
                    clearInterval(timer)
                }

            }, 1000)
            // 发送验证码事件
            sendCodeApi({
                tel: this.tel
            }).then(res => {
                console.log(res);
            })
        },
        submitFn() {
            // 点击下一步事件
            // 验证短信验证码是否是本手机号发送的, 需要调用接口
            docheckcodeApi({
                tel: this.tel,
                telcode: this.sms
            }).then(res => {
                this.$toast({
                    type: res.code == 200 ? 'success' : 'fail',
                    message: res.message,
                    duration: 1000,
                    onClose: () => {
                        if (res.code == 200) {
                            this.$router.push({
                                name: 'step3',
                                params: {
                                    tel: this.tel
                                }
                            })
                        }
                    }
                })
            })

        }
    }
}
</script>
<style lang="less" scoped>
.submit_box {
    width: 100%;
    display: flex;
    margin-top: 50px;
    justify-content: center;
}

.van-button--large {
    width: 80%;
    height: 40px;
}
</style>